<template>
    <div class="titles-style-box">
        <ul class="titles-style-outer">
            <el-radio-group v-model="base.titleType">
                <li class="attr-item">
                    <el-radio label="TitleOne">
                        <div class="title-box">
                            <div class="title">
                                <span class="title-text">标题文字</span>
                            </div>
                        </div>
                    </el-radio>
                </li>
                <li class="attr-item">
                    <el-radio label="TitleTwo">
                        <div class="title-box title-box-two">
                            <div class="title">标题文字</div>
                        </div>
                    </el-radio>
                </li>
                <li class="attr-item">
                    <el-radio label="TitleThree">
                        <div class="title-box title-box-three">
                            <div class="title">标题文字</div>
                        </div>
                    </el-radio>
                </li>
                <li class="attr-item">
                    <el-radio label="TitleFour">
                        <div class="title-box title-box-four">
                            <div class="title">
                                <span class="title-text">标题文字</span>
                            </div>
                        </div>
                    </el-radio>
                </li>
                <li class="attr-item">
                    <el-radio label="TitleFive">
                        <div class="title-box title-box-five">
                            <div class="title">
                                <span class="title-text">标题文字</span>
                            </div>
                        </div>
                    </el-radio>
                </li>
            </el-radio-group>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'TitlesStyle',
        props: {
            base: {
                type: Object,
                default: _ => {
                    return {
                        titleType: '',
                        color: ''
                    };
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '../../../styles/init';

    $color-409EFF: #409EFF;
    $color-FD415F: #FD415F;

    .titles-style-box {
        .titles-style-outer {
            .el-radio-group {
                width: 100%;
            }
            .attr-item {
                height: fit-content;
                line-height: 30px;
                margin-top: 10px;
                display: flex;
                align-items: center;

                .el-radio {
                    display: flex;
                    width: 100%;
                }
            }
            .title-box {
                padding: 0 12px 4px;
                border: 1px solid #cccccc;

                .title {
                    width: 100%;
                    height: 24px;
                    line-height: 22px;
                    font-weight: 600;
                    position: relative;
                    top: -1px;
                    text-align: center;
                    color: #000000;
                    border-bottom: 2px solid rgba(#cccccc, .3);

                    .title-text {
                        height: 100%;
                        max-width: 100%;
                        box-sizing: border-box;
                        position: relative;
                        top: 2px;
                        display: inline-block;
                        border-bottom: 2px solid $color-FD415F;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
            .title-box-two, .title-box-three, .title-box-four, .title-box-five {
                height: 30px;
                box-sizing: border-box;
                padding: 4px 20px;

                .title {
                    height: 100%;
                    top: 0;
                    border: none;
                    line-height: 20px;
                    background-color: rgba(204, 204, 204, .3);
                }
            }
            .title-box-three, .title-box-four, .title-box-five {
                .title {
                    text-align: left;
                    text-indent: .5rem;
                    border-left: 3px solid $color-FD415F;
                }
            }
            .title-box-four {
                .title {
                    text-align: left;
                    text-indent: 0;
                    border-left: none;
                    line-height: 20px;
                    background-color: #ffffff;

                    .title-text {
                        top: 0;
                    }
                }
            }
            .title-box-five {
                .title {
                    padding: 2px 0;
                    border-left: none;
                    text-indent: 0;
                    border-bottom: none;
                    background-color: #ffffff;

                    .title-text {
                        top: 0;
                        text-indent: .5rem;
                        line-height: 16px;
                        border-bottom: none;
                        border-left: 3px solid $color-FD415F;
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .titles-style-box {
        .titles-style-outer {
            .attr-item {
                .el-radio__label {
                    width: 100%;
                }
                .el-radio__input {
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
</style>
